<template>
   <div class="app-container">
        <div class="root">
            <SortableList v-model="lists" :lockToContainerEdges="true" :distance="10" lockOffset="0%" lockAxis="xy" axis="xy" @input='checkallarr'>
            <InnerList v-for="(list, index) in lists" :key="list.id" :index="index" collection="lists" :list="list" v-on:selects="hhg"></InnerList>
            </SortableList>
        </div>
   </div>
</template>


<script>
import InnerList from './inner.vue'
import {ContainerMixin, ElementMixin} from 'vue-slicksort';
const SortableList = {
  mixins: [ContainerMixin],
  template: `
    <ul class="list1">
      <slot />
    </ul>
  `
};
export default {
  components: {
    SortableList,
    InnerList,
  },
  data() {
    return {
     lists:[
        {
        id:'a',
        value:'329057',
            items: [
                {id:"item1",ischeck:true,value:'348374'},
                {id:"item2",ischeck:false,value:'cghweuio'},
                {id:"1",ischeck:false,value:'杀的GV我'},
                {id:"2",ischeck:false,value:'别和'},
                {id:"3",ischeck:false,value:'为共同话题'},
                {id:"4",ischeck:false,value:'格古通今'},
                {id:"5",ischeck:true,value:'\(^o^)/~4股热狗'},
                {id:"6",ischeck:false,value:'不好听人家'},
                {id:"7",ischeck:false,value:'34是个音乐盒8374'},
                {id:"8",ischeck:false,value:'何荣合同价吧'},
                {id:"9",ischeck:false,value:'给5䦹'},
                {id:"10",ischeck:false,value:'可以喝冎'},
            ],
        },
        {
        id:'b',
        value:'cfjmeih',
            items: [
                {id:"item1",ischeck:false,value:'jfuief897424'},
                {id:"item2",ischeck:false,value:'[][fjiewfhuw]]'},
                {id:"item3",ischeck:true,value:'/48/'},
            ],
        },
        {
        id:'c',
        value:'1284',
            items: [
                {id:"item1",ischeck:false,value:'jfuief897424'},
                {id:"item2",ischeck:false,value:'[][fjiewfhuw]]'},
                {id:"325",ischeck:true,value:'/48/'},
                {id:"543",ischeck:true,value:'VR而不'},
                {id:"gre",ischeck:true,value:'帮我和人吧'},
            ],
        },
        {
        id:'d',
        value:'vhrev',
            items: [
                {id:"item1",ischeck:false,value:'vfbettbgvet th t6h'},
            ],
        },
    ],
    
    };
  },
  methods:{
      hhg(val){
        let str=JSON.stringify(this.lists)
        let arr=JSON.parse(str)
        let cAll = [];
        arr.forEach((i,index) => {
            if(i.id == val.id){
               arr[index]=val
               console.log(arr)
            }else{
                cAll = [];
                for(let j=0;j<i.items.length;j++){
                    if(i.items[j].ischeck){
                        cAll.push(i.items[j]);
                    }
                }
                i.items = cAll;
            }
        })
      },
      checkallarr(val){
        let cAll = [];
        let str=JSON.stringify(val)
        let arr=JSON.parse(str)
        if(arr.length != 0){
        arr.forEach(k => {
            cAll = [];
            for(let j=0;j<k.items.length;j++){
                console.log(j);
                if(k.items[j].ischeck){
                    cAll.push(k.items[j]);
                }
            }
            k.items = cAll;
        })
        }
        console.log(arr);   
      }
  }
}
</script>
<style>
.list1{
    list-style: none;
    /* min-width:334px; */
    max-width: 770px;
    display: inline-block;
    max-height: 400px;
    overflow: auto;
    border: 1px solid #efefef;
    padding:10px;
}
</style>
